<script>
import ResourceItem from "../../../components/resource/ResourceItem.vue";
import {listResource, pageResource} from "../../../api/resource";
import {listGroups} from "../../../api/group";

export default {
    name: "Resource",
    components: {ResourceItem},
    data() {
        return {
            resList: [],
            param: {
                current: 0,
                size: 5,
                groupId:0,
            },
            pageInfo: {
                pages: 0,
                total: 0,
            },
            options:[]
        }
    },
    methods: {
        pageResource() {
            this.param.current++;
            let param=this.param;
            if(param.groupId===0)
                delete param.groupId
            pageResource(param)
                .then(res => {
                    if (res.code === 200) {
                        this.resList = this.resList.concat(res.data.records)
                        this.pageInfo.pages = res.data.pages
                        this.pageInfo.total = res.data.total
                    }
                })
        },
        deleteItem(param) {
            this.resList.splice(param, 1)
        },
        getGroupList(){
            console.log(this.user)
            listGroups(this.user.userId)
            .then(res=>{
                if(res.code===200)
                    this.options=res.data
                console.log(res)
            })
        },
        selectGroup(){
            this.param.current=0;
            this.resList=[]
            this.pageResource();
        }
    },
    mounted() {
        this.param.ownerId=this.user.userId
        this.pageResource();
        this.getGroupList()
    },
    computed: {
        user() {
            return this.$store.state.userInfo;
        }
    }
}
</script>
<template>
    <div class="flex row align-center center group-box">
        <div class="flex column align-center group-left">
            <div class="flex column" style="width: 100%">
                <div class="flex row align-center space-between" style="width: 100%">
                    <h2>资料管理</h2>
                    <el-select  v-model="param.groupId" placeholder="选择专栏" @change="selectGroup" >
                        <el-option label="全部" :value="0"/>
                        <el-option
                            v-for="item in options"
                            :label="item.name"
                            :value="item.id"
                        />
                    </el-select>
                </div>
                <el-divider style="margin: 0 0 10px 0;!important;"/>
            </div>
            <ResourceItem @deleteItem="deleteItem" v-for="(item,i) in resList" :index="i" :value="item"/>
            <el-button v-if="pageInfo.pages>param.current" @click="pageResource">more</el-button>
        </div>

    </div>
</template>

<style scoped>

.group-box {
    height: 100%;
    width: 100%
}

.group-left {
    margin: 30px 10px;
    height: calc(100% - 60px);
    width: calc(70% - 10px);
    background: white;
    padding: 0 60px;
    border-radius: 15px;
    overflow-y: auto;
    box-shadow: 0 2px 13px 0 rgba(0, 0, 0, 0.1);
}

</style>
